<template>
  <el-dialog title="提示" :visible.sync="showModify" width="30%" center>
    <el-form ref="form" size="mini" :model="formData" label-width="80px" :rules="validateRules">
      <el-form-item label="菜单名称" prop="menuTitle">
        <el-input v-model="formData.menuTitle" placeholder="请输入菜单名称" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="菜单排序" prop="menuOrder">
        <el-input-number v-model="formData.menuOrder" controls-position="right" :min="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onModify">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      showModify: false,
      formData: {},
      validateRules: {
        menuTitle: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        menuOrder: [{ required: true, message: "请输入菜单排序", trigger: "blur" }]
      },
    }
  },
  methods: {
    ...mapActions('pms/sys.menu', ['menuUpdate']),
    showDialog(data = {}) {
      this.formData = data,
        this.showModify = true
    },
    onModify() {
      //在用户修改了菜单之后执行
      this.showModify = false,
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.formData.id) {
              this.menuUpdate(this.formData).then(() => {
                
                this.$message.success("修改成功")

              })
            }
            this.showModify = false;
            //发送一个事件,通过该事件来通知父组件修改/添加成功
            this.$emit("menuChanged")
          } else {
            console.log("验证失败");
          }
        });
    }
  }

}
</script>